<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper的切换</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/certify.css">
<script src="js/swiper.min.js"></script>
</head>
<body>
<div class="pk-imgcenter">
    <div id="certify">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/value-1.png" /></div>
                <div class="swiper-slide"><img src="./img/value-2.png" /></div>
                <div class="swiper-slide"><img src="./img/value-3.png" /></div>
                <div class="swiper-slide"><img src="./img/value-1.png" /></div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script>
// <!-- //分页器 http://www.swiper.com.cn/ -->
    var certifySwiper = new Swiper('#certify .swiper-container', {
        // watchSlidesProgress: true,
        loop: true,
        loopedSlides: 4,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable :true,
            hideOnClick :true,
        },
        //轮播特效类型
        //effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        //自动播放参数
        // autoplay: {
        //     delay: 2000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: true,
        // },
        autoplay:false,
        //点击切换到指定位置
        slideToClickedSlide: true,
        //分页器
        pagination: {
            el: '.swiper-pagination',
        },
        on: {
            progress: function(progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 260 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 4;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            setTransition: function(transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        },
        coverflowEffect: {
            rotate: 50,
            stretch: -100,
            depth: 100,
            modifier: 1,
            slideShadows : true
        }

    })
    //如果你在swiper初始化后才决定使用clickable，可以这样设置
    certifySwiper.params.pagination.clickable = true ;
    //此外还需要重新初始化pagination
    certifySwiper.pagination.destroy()
    certifySwiper.pagination.init()
    certifySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
</script>
</body>
</html>